<template>
	<view class="main animated fadeIn faster" style="overflow: hidden;">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="title">
				<view class="goback" @click="goback">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
				</view>
			</view>
		</view>
		<view class="mt-200 px-5 d-flex d-flex-bottom">
			<view class="font-bold" style="font-size: 80rpx;">0</view>
			<view class="font34 ml-1 mb-1">挚友值</view>
		</view>
		<view class="px-5 d-flex d-flex-middle">
			<view class="font26" style="flex: 1; color: #5e5c5c; margin-right: 90rpx;">差520挚友值即可免费和Ta绑定CP/基友/闺蜜/知己/搭子关系,解锁专属空间哦</view>
			<view class="position-relative ml-6">
				<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" mode="heightFix" style="height: 120rpx; border: 1px solid #fff;"></image>
				<image class="rounded position-absolute" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" mode="heightFix" style="height: 120rpx; border: 1px solid #fff; left: -75rpx;"></image>
			</view>
		</view>
		<view class="linerbg colorfff text-center py-2 rounded50 ml-5 mt-3" style="width: 200rpx;">去确定关系</view>
		<view class="ml-5 font34 mt-100 mb-4">挚友值</view>
		<view class="" style="width: 80%; margin: 0 auto;">
			<view class="d-flex d-flex-between px-2">
				<view class="rounded colorfff text-center" style="width: 52px; line-height: 52px; height: 52px; background-image: linear-gradient(135deg, #c251bb, #ff5d83)">0</view>
				<view class="rounded colorfff text-center position-relative" style="width: 52px; line-height: 52px; height: 100rpx; background-image: linear-gradient(135deg, #c251bb, #fbb95c)">
					<view class="position-absolute rounded" style="top: 50%; left: 50%; width: 47px; height: 47px; color: #636161; line-height: 47px; background-color: #fff; transform: translate(-50%, -50%);">520</view>
				</view>
				<view class="rounded colorfff text-center position-relative" style="width: 52px; line-height: 52px; height: 100rpx; background-image: linear-gradient(135deg, #c251bb, #fbb95c)">
					<view class="position-absolute rounded" style="top: 50%; left: 50%; width: 47px; height: 47px; color: #636161; line-height: 47px; background-color: #fff; transform: translate(-50%, -50%);">1314</view>
				</view>
			</view>
			<view class="mt-2 mb-3 rounded20 position-relative" style="width: 100%; height: 5px; background: #eaeaea; box-sizing: border-box;">
				<view class="position-absolute rounded20" style="left: 0; width: 25%; height: 100%; background-image: linear-gradient(to right, #9a3ad3, #fd5887, #fbb45a)"></view>
				<view class="position-absolute rounded" style="width: 10rpx; height: 10rpx; background: #fff; top: 0; left: 34px;"></view>
				<view class="position-absolute rounded" style="width: 10rpx; height: 10rpx; background: #fff; top: 0; left: 50%; transform: translateX(-50%);"></view>
				<view class="position-absolute rounded" style="width: 10rpx; height: 10rpx; background: #fff; top: 0; right: 34px;"></view>
			</view>
			<view class="d-flex d-flex-between mb-1">
				<view class="">初次见面</view>
				<view class="" style="color: #6a6868;">可绑定关系</view>
				<view class="mr-4" style="color: #6a6868;">LV.2</view>
			</view>
			<view class="position-relative" style="width: 165rpx; margin: 0 auto;">
				<image class="position-absolute" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201755.png" mode="heightFix" style="height: 30px; left: -7px; top: -2px;"></image>
				<view class="colorfff linerbg rounded50" style="width: 165rpx; text-align: right; padding: 1px 5px 4px 0px;">初见之欢</view>
			</view>
		</view>
		<view class="pl-5 mt-100 font34 font-bold">今日获得挚友值 : 0</view>
		<view class="pl-5 mt-1 font30" style="color: #5e5c5c;">一周未与好友互动,挚友值将在周日0点减少50分</view>
		<view class="px-5 pb-5">
			<view class="d-flex d-flex-middle mt-4" v-for="i in taskListData" :key="i.id">
				<view class="d-flex-btn rounded30" style="width: 100rpx; height: 100rpx; background-image: linear-gradient(to right, #7ebefc, #e5bbfd);">
					<image :src="i.icon" mode="heightFix" style="height: 60rpx;"></image>
				</view>
				<view class="d-flex-column ml-2" style="flex: 1;">
					<view class="font30">{{i.task}}</view>
					<view class="ml-1" style="color: #c6c6c7;">{{i.desc}}</view>
				</view>
				<view class="linerbg rounded40 colorfff px-3 py-2">{{i.btntext}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				bgcolor:'transparent',
				taskListData:[
					{
						id: 0,
						task: '[玩伴]主动踩房间、发消息',
						desc: '+1分,每日仅一次',
						icon: '../../static/tabBar/cate.png',
						btntext: '去完成'
					},
					{
						id: 1,
						task: '[玩伴]互发聊天消息',
						desc: '+1分,每日仅一次',
						icon: '../../static/tabBar/cate.png',
						btntext: '去聊天'
					},
					{
						id: 2,
						task: '[玩伴]主动踩房间、发消息',
						desc: '+1分,每日仅一次',
						icon: '../../static/tabBar/cate.png',
						btntext: '去挂房'
					},
					{
						id: 3,
						task: '[玩伴]主动踩房间、发消息',
						desc: '仅限首次',
						icon: '../../static/tabBar/cate.png',
						btntext: '去看看'
					},
					{
						id: 4,
						task: '[玩伴]主动踩房间、发消息',
						desc: '+1分,每日仅一次',
						icon: '../../static/tabBar/cate.png',
						btntext: '去送礼'
					}
				]
			}
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
</style>